/* pages/task_list/task_list.wxss */
.g-container {
  >.g-header {

    >.tab_wrap {
      position: relative;
      display: flex;
      height: 88rpx;
      background: #fff;

      >.tab {
        position: relative;
        flex: 1;
        // transition: all 0.1s;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        &.active {
          font-size: 30rpx;
          font-weight: bold;
          color: #00a2ff;

          &::after {
            width: 3em;
          }
        }

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          transition: all 0.1s;
          width: 0;
          height: 8rpx;
          border-radius: 1000rpx;
          background: #00a2ff;
        }
      }

      >.bar {
        position: absolute;
        // left: 375rpx;
        transform: translateX(-50%);
        bottom: 0;
        width: 3em;
        height: 8rpx;
        border-radius: 1000rpx;
        background: #00a2ff;
      }
    }
  }

  >.g-main {
    position: relative;

    >.list_wrap {
      .custom-cls {
        // padding-bottom: 20rpx;
      }

      .load-cls {
        padding-top: 12rpx;
        padding-bottom: 28rpx;
      }

      .total_wrap {
        padding: 24rpx 28rpx;
        text-align: right;
        color: #4f4f4f;
      }

      .li_wrap {
        margin: 0 24rpx 24rpx;
        border-radius: 14rpx;
        background: #fff;

        &:last-child {
          margin-bottom: 0;
        }

        >.li_header, >.li_main, >.li_footer {
          margin: 0 30rpx;
          font-size: 30rpx;
        }

        >.li_header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 102rpx;
          padding-right: 0;

          >.text {
            color: #aaa;
          }

          >.u-btn {
            height: 100%;
            padding: 0 30rpx;
            font-size: 28rpx;
            color: #00a2ff;
          }
        }

        >.li_main {
          padding: 30rpx 0;
          border: 2rpx dashed #ddd;
          border-left: none;
          border-right: none;

          &:first-child {
            border-top: none;
          }

          &:last-child {
            border-bottom: none;
          }

          >.title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            >.left {
              font-size: 32rpx;
              font-weight: bold;
              color: #444444;
            }

            >.right {
              font-size: 28rpx;

              &.blue {
                color: #00a2ff;
              }
              &.red {
                color: #ff7373;
              }
              &.black {
                color: #4f4f4f;
              }
              &.yellow {
                color: #ffbd2c;
              }
            }
          }

          >.text {
            display: flex;
            // align-items: center;
            margin-bottom: 20rpx;

            &:last-child {
              margin-bottom: 0;
            }

            >.label {
              width: 4em;
              min-width: 4em;
              margin-right: 40rpx;
              color: #aaa;
            }
          }
        }

        >.li_footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          min-height: 124rpx;

          >.text {
            color: #FF6E0C;

            >.unit {
              font-size: 28rpx;
              color: #303030;
            }
          }

          >.btn_wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            padding-bottom: 20rpx;

            >.u-btn {
              display: inline-flex;
              min-width: fit-content;
              height: 64rpx;
              box-sizing: border-box;
              margin-left: 20rpx;
              margin-top: 20rpx;
              padding: 0 32rpx;
              // border-radius: 1000rpx;
              border-radius: 8rpx;
              font-size: 28rpx;
            }

            >.btn_dflt {
              color: #fff;
              background: #00a2ff;
            }

            >.btn_cancel {
              border: 2rpx solid #aaa;
            }
          }
        }
      }
    }

    >.u-btn {
      position: absolute;
      bottom: 20rpx;

      &.btn_dflt {
        left: 20rpx;
        width: calc(100% - 40rpx);
        height: 88rpx;
        box-sizing: border-box;
        box-shadow: 0px 3px 6px 1px rgba(61, 177, 162, 0.74);
        border-radius: 1000rpx;
        font-size: 32rpx;
        color: #fff;
        background: #00C657;
      }
    }
  }

  >.g-footer {}
}
